<!-- 事项发布 -->

<script>
import exTable from '@/component/table.vue'
import { getDictByType } from '@/api/config_platform'
import { mapGetters } from 'vuex'
import CpSearchMode from '@cci/cp-search-mode'
const tableApi = async () => { }

export default {
  name: 'QueryTable',
  components: {
    exTable,
    CpSearchMode
  },
  data () {
    return {
      statusList: [], // 状态列表
      inputList: {
        search: this.handleSearch,
        refresh: this.handleRefresh,
        model: this.getDefaultModel(),
        data: [],
        spanLength: 6,
        showLine: 1
      },
      tableConfig: {
        maxHeight: '100%',
        index: true,
        data: [],
        columns: [],
        btns: [
          { text: '查看', methods: this.handleView.bind(this) },
          { text: '发布', methods: this.handlePublish.bind(this) }
        ]
      },
      total: 0,
      localPagination: {
        pageNum: 1, // 当前页
        pageSize: 10 // 当前显示页数
      },
      // 自定义参数（不被查询表单重置和改变的参数）
      customQueryParam: {},
      autoLoadData: true, // 默认加载表格数据
      tableApi: tableApi, // 表格数据API
      toDecorateApi: true, // 是否装饰API 开启后 防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
      clientWidth: 0,
      checkbox_list: [
        { label: '我申请的', value: 'isMyApply' },
        { label: '我审核的', value: 'isMyCheck' },
        { label: '变动申请', value: 'isChangeApply' }
      ],
      checkList: [],
      queryData: {}
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  mounted () {
    const that = this
    this.clientWidth = document.body.clientWidth
    this.__window__.addEventListener('resize', function () {
      return (() => {
        that.clientWidth = document.body.clientWidth
      })()
    })
  },
  watch: {
    clientWidth (val) {
      if (val < 1600) {
        this.inputList.spanLength = 8
      } else {
        this.inputList.spanLength = 6
      }
    }
  },

  methods: {
    handleSearch () {
      this.localPagination.pageNum = 1
      this.loadData()
    },
    handleRefresh () {
      // this.inputList.model = this.getDefaultModel()
      this.inputList.model = this.getResetModel()
      this.handleSearch()
    },
    getDefaultModel () {
      return {}
    },
    // 重置参数
    getResetModel () {
      const model = this.inputList.model
      for (const key in model) {
        if (model[key] instanceof Array) {
          model[key] = []
        } else {
          model[key] = ''
        }
      }
      return model
    },
    handleView () {
      // console.log('test')
      // this.$router.push({ path: '/type/preview/detail' })
    },
    handlePublish (row) {
      // console.log(row, 'test')
    },
    /***
     * 每页显示数量变化
     */
    handleSizeChange (size) {
      this.localPagination.pageNum = 1
      this.localPagination.pageSize = size
      this.loadData()
    },
    /**
     * 当前页变换
     */
    handleCurrentChange (current) {
      this.localPagination.pageNum = current
      this.loadData()
    },
    /**
     * 请求参数转换
     */
    transformParams (params) {
      for (const key in params) {
        if (params[key] instanceof Array) {
          params[key] = params[key].at(-1)
        }
        if (key == 'reportTime') {
          params.startTime = params[key][0]
          params.entTime = params[key][1]
        }
        // if (params[key] instanceof Array) {
        //   params[key] = params[key].join(',')
        // }
      }
      return params
    },
    async loadData () {
      const params = {
        ...this.inputList.model,
        ...this.localPagination,
        ...this.customQueryParam
      }
      const _params = this.transformParams(params)
      const { data } = await this.tableApi(_params)
      this.tableConfig.data = data.list
      this.total = Number(data.total)
      return { records: data.list }
    },
    /**
     * 包装LoadData
     */
    decorateLoadData () {
      const loadData = this.loadData
      this.loadData = async function () {
        const { records } = await loadData.apply(this, arguments)
        // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
        if (records.length === 0 && this.localPagination.pageNum > 1) {
          this.localPagination.pageNum--
          this.loadData.apply(this, arguments)
        }
      }
    },

    /**
     * 搜索Form
     */
    renderSearchForm () {
      return (
        <div class="frame-box">
          <CpSearchMode searchMode={this.inputList}>
            {this.renderBtnList()}
          </CpSearchMode>
        </div>
      )
    },
    /**
     * 用于继承的按钮部分
     */
    renderBtnList () { },
    /**
     * 渲染表格
     */
    renderTable () {
      return (
        <exTable
          tableConfig={this.tableConfig}
          page={this.localPagination}
          class="QueryTable-table"
        ></exTable>
      )
    },
    renderPagination () {
      return (
        <div class="QueryTable-pagination">
          <CPagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            pageSizes={[10, 20, 50, 100]}
            current-page={this.localPagination.pageNum}
            page-size={this.localPagination.pageSize}
            total={this.total}
            on-size-change={this.handleSizeChange}
            on-current-change={this.handleCurrentChange}
          ></CPagination>
        </div>
      )
    },
    renderExternal () {
      return ''
    }
  },
  created () {
    // 装饰LoadData 不需要可关闭
    this.toDecorateApi && this.decorateLoadData()
    // 请求数据
    this.autoLoadData && this.loadData()
  },
  render () {
    return (
      <div class="QueryTable-type">
        {this.renderSearchForm()}
        <div class="QueryTable-type-main frame-box">
          {this.renderTable()}
          {this.renderPagination()}
        </div>
        {this.renderExternal()}
      </div>
    )
  }
}
</script>
<style lang='scss' scoped>
.QueryTable-type {
  height: 100%;
  overflow: auto;
}

.QueryTable-type-main {
  $margin-top: 16px;
  margin-top: $margin-top;
  height: calc(100% - 118px - #{$margin-top});
}

.QueryTable-table {
  // height: calc(100% - 36px - 16px);
  // overflow: auto;
}

.QueryTable-pagination {
  margin-top: 16px;
  float: right;
}

.el-checkbox-group {
  .el-checkbox {
    margin-right: 10px;
  }
}
</style>
